<template>
	<div id="userRecharge" class="userRecharge same-change-oldstyle">
		<div class="same-head-box">
			<div class="saem-seat-box">
				<div class="saem-seat-left">
					<span>当前位置：</span>
					<el-breadcrumb separator-class="el-icon-arrow-right">
						<el-breadcrumb-item>水卡管理</el-breadcrumb-item>
						<el-breadcrumb-item :to="{ path: '/cardrechargeol' }">充值管理</el-breadcrumb-item>
						<el-breadcrumb-item>充值记录</el-breadcrumb-item>
					</el-breadcrumb>
				</div>
				<div class="saem-seat-right">
					<button class="same-search-btns same-search-export" @click="export_Excel">导出</button>
					<button class="same-search-btns same-search-export" @click="RefreshFun">刷新</button>
					<!-- <button class="same-search-btns" @click="returnBack">返回</button> -->
				</div>
			</div>
			<div class="same-search-box">
				<div>
					<div class="same-search-left">
						<div class="same-left-one">
							<span class="same-search-span">水卡卡号:</span>
							<el-input size="medium" v-model="cardNum" type="Number" placeholder="请输入水卡卡号" style="width: 160px;">
							</el-input>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">充值单号:</span>
							<el-input size="medium" v-model="sale_order" type="text" placeholder="请输入充值单号" style="width: 160px;">
							</el-input>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">园区名称</span>
							<el-input size="medium" v-model="village_name" type="text" placeholder="请输入园区名称" style="width: 160px;">
							</el-input>
						</div>
						<div class="same-left-one" v-if="!moveShow">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>

							<el-button type="primary" size="medium"   @click="findJfList()"> 搜索</el-button>
							<el-button type="info" size="medium"   @click="reset()"> 重置</el-button>
						</div>
					</div>
					<div class="same-search-right"></div>
				</div>
				<!-- 更多搜索 -->
				<div>
					<div class="same-search-left  new-sear-height" ref="leftHeight">
						<div class="same-left-one">
							<span class="same-search-span same-search-fisrt">充值时间:</span>
							<el-date-picker style="width:140px" v-model="start_time" type="date" size="medium"
								value-format="yyyy-MM-dd" placeholder="开始时间"></el-date-picker>
							<div class="same-interval">至</div>
							<el-date-picker style="width:140px" v-model="end_time" type="date" size="medium" value-format="yyyy-MM-dd"
								placeholder="结束时间"></el-date-picker>
						</div>
						<div class="same-left-one">
							<span class="same-search-span">订单类型:</span>
							<el-select size="medium" v-model="type_s" placeholder="请选择" style="width: 140px;">
								<el-option v-for="item in stateoption" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<div class="same-left-one" :class="[moveShow?'':'new-sear-opacity']">
							<div class="same-left-zdshwo" :hidden="!moveBtn" @click="openMore">收起更多查询条件<i
									:class="[moveShow?'el-icon-arrow-up':'el-icon-arrow-down']"></i></div>
							<!-- <button class="same-search-btns" type="button" @click="findJfList()">搜索</button>
							<button class="same-search-btns same-reset-btn" type="button" @click="reset()">重置</button> -->
							<el-button type="primary" size="medium"   @click="findJfList()"> 搜索</el-button>
							<el-button type="info" size="medium"   @click="reset()"> 重置</el-button>

						</div>
					</div>
					<div class="same-search-right"></div>
				</div>

			</div>
		</div>

		<div class="same-table-box">
			<h4 class="same-title-box">
				充值统计
				<div class="same-search-total" v-if="census != ''">
					<!--(合计:-->
					<!--<span style="color:#FF6565">{{ census|filterNumber }}</span>-->
					<!--元)-->
                    (充值:
                    <span style="color:#FF6565">{{ r_money|filterNumber }}</span>
                    元，赠送：
                    <span style="color:#FF6565">{{ g_money|filterNumber }}</span>
                    )
				</div>
			</h4>
			<div class="table_box">

				<div class="common-table-outer">
					<el-table class="common-table" v-loading="loading" header-cell-class-name="common-table-header-cell"
						:data="tableData" stripe>
						<!-- <el-table-column align="center" prop="id" width="120" label="ID">
							<template slot-scope="scope">
								<span v-if="scope.row.id">{{ scope.row.id }}</span>
								<span v-else>{{ scope.row.partner_id }}</span>
							</template>
						</el-table-column> -->
						<el-table-column header-align="center" width="70" align="center" label="序号">
							<template slot-scope="scope">
								{{scope.$index+1+(pageNo-1)*row}}
							</template>
						</el-table-column>

						<el-table-column align="center" label="水卡卡号">
							<template slot-scope="scope">
								<!-- filtersCard -->
								{{ scope.row.card_number }}
							</template>
						</el-table-column>

						<el-table-column align="center" prop="sale_order" label="订单编号">
						</el-table-column>

						<el-table-column align="center" prop="pay_time" label="支付时间">
						</el-table-column>


						<el-table-column align="center" label="金额">
							<template slot-scope="scope">
								{{ scope.row.pay_money |filterNumber}}
							</template>
						</el-table-column>
						<el-table-column align="center" label="园区名称">
							<template slot-scope="scope">
								{{ scope.row.village_name || '——' }}
							</template>
						</el-table-column>
						<el-table-column align="center" label="订单类型">
							<template slot-scope="scope">
								<span>{{ scope.row.order_type_desc}}</span>
							</template>
						</el-table-column>

						<el-table-column align="center" label="支付状态">
							<template slot-scope="scope">
								<span v-if="scope.row.pay_status == 1" style="color:#88CE2B">{{ scope.row.pay_status_desc }}</span>
								<span v-else-if="scope.row.pay_status == 2" style="color:#FF6565">{{ scope.row.pay_status_desc }}</span>
								<span v-else-if="scope.row.pay_status == 3" style="color:#377CD9">{{ scope.row.pay_status_desc }}</span>
								<span v-else-if="scope.row.pay_status == 4" style="color:#FF6565">{{ scope.row.pay_status_desc }}</span>
								<span v-else style="color:#2C5586">{{ scope.row.pay_status_desc }}</span>
							</template>
						</el-table-column>

<!--						<el-table-column align="center" label="手机号码">-->
<!--							<template slot-scope="scope">-->
<!--								{{ scope.row.phone || '——' }}-->
<!--							</template>-->
<!--						</el-table-column>-->
						<el-table-column align="center" label="备注">
							<template slot-scope="scope">
								{{ scope.row.remake || '——' }}
							</template>
						</el-table-column>

						<template slot="empty" v-if="isLoad">
							<div class="new-no-data-show">
								<img src="../../assets/images/no-data.png" alt="">
								<div>暂无相关数据</div>
							</div>
						</template>
					</el-table>

					<div class="same-page-inShow" v-if="tableData.length > 0 && isLoad">
						<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
							:current-page="pageNo" :page-sizes="sizes" :page-size="row"
							layout="total,prev, pager, next, jumper, sizes" :total="total"></el-pagination>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'userRecharge',
		data: function () {
			return {
				loading: false,
				row: 15,
				sizes: [15, 30, 40, 50],
				total: 0,
				pageNo: 1,
				start_time: '',
				end_time: '',
                village_name:'',
				tableData: [], // 返回的结果集合
				time: '', // 结束时间
				type_s: '', //选择类别
				cardNum: '', //水卡卡号
				stateoption: [
					{
						value: '',
						label: '全部'
					},
					{
						value: '1',
						label: '充值'
					},
					{
						value: '2',
						label: '特殊水卡充值'
					},
					{
						value: '3',
						label: '赠送'
					},
            {
                value: '4',
                label: '促销项目'
            },
            {
                value: '5',
                label: '修改余额'
            }
				],
				userinfo: [],
				census: '', //合计...
                g_money:'',
                r_money:'',
				cen_sus: 0, //合计状态
				sale_order: '',
				isLoad: false,

				moveBtn: false,//是否暂时更多查询条件按钮按钮 搜索条件控制
				moveShow: false,//是否开启动画
				scrollHeight: '',//需要监听的高度
			};
		},
		computed: {},
		// 初始化执行
		created: function () {
			this.$emit('gitHidden', true);//是否隐藏底部版权 true 隐藏
			this.cardRechargeRecord(); // 获取积分管理页面数据
		},
		inject: ['reload'],
		methods: {
			RefreshFun() {
				// 调用reload方法，刷新整个页面
				this.reload()
			},
			//返回
			returnBack() {
				this.$router.back(-1);
			},
			//导出...
			export_Excel() {
				var that = this;
				var cardNum = that.cardNum;
				that.$post({
					url: 'Partner/WaterCard/exportCardRechargeRecord',
					data: {
						start_time: that.start_time ? that.start_time : '',
						end_time: that.end_time ? that.end_time : '',
						card: cardNum,
                        village_name:that.village_name,
						recharge_source: that.type_s
					},
					success: data => {
						if (data.code < 0) {
							this.$message({
								showClose: true,
								message: data.data.message,
								center: true
							});
						}
						var $form = $('<form method="GET"></form>');
						$form.attr('action', data.data);
						$form.appendTo($('body'));
						$form.submit();
					}
				});
			},
			reset() {
				this.time = '';
				this.start_time = '';
				this.end_time = '';
				this.cardNum = '';
				this.sale_order = '';
                this.village_name ='';
				this.type_s = '';
				this.page = 1;
				this.cardRechargeRecord();
			},

			//搜索
			findJfList() {
				this.cen_sus = 1;
				this.pageNo = 1;
				this.cardRechargeRecord();
			},

			//每页
			handleSizeChange(val) {
				this.row = val;
				this.pageNo = 1;
				this.cardRechargeRecord();
			},
			//分页
			handleCurrentChange(val) {
				this.pageNo = val;
				this.cardRechargeRecord();
			},
			// 获取积分管理页面数据
			cardRechargeRecord: function () {
				var that = this;
				that.loading = true; //打开loading动画
				that.isLoad = false; //是否加载

				// ajax请求
				that.$post({
					url: 'Partner/WaterCard/card_recharge_record',
					data: {
						page: that.pageNo,
						row: that.row,
						start_time: that.start_time,
						end_time: that.end_time,
						card: that.cardNum,
						sale_order: that.sale_order,
						order_type: that.type_s,
                        village_name:that.village_name
					},
					success: data => {
						that.isLoad = true;
						that.loading = false; //关闭动画
						if (data.code == 1000) {
							that.tableData = data.data.data;
							that.total = Number(data.data.page.total_number);
							that.pageNo = data.data.page.current_page;
							var getCen = data.data.census ? data.data.census : '00';
							that.census = getCen.substring(0, getCen.length - 1); //合计
                            that.g_money = data.data.g_money;
                            that.r_money = data.data.r_money;
						}
					}
				});
			},
			//此处获取高度必须在dom元素创建完成之后才能获取
			gitHeight() {
				//  let clientHeight=this.$refs.leftHeight.clientHeight;
				let scrollHeight = this.$refs.leftHeight.scrollHeight;
				this.scrollHeight = scrollHeight;
				scrollHeight <= 30 ? this.moveBtn = false : this.moveBtn = true;

			},
			openMore() {
				this.moveShow = !this.moveShow;
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			},
		},
		mounted() {
			this.gitHeight();
			//监听高度变化
			var that = this;
			window.addEventListener("resize", function () {
				let scrollHeight = that.$refs.leftHeight && that.$refs.leftHeight.scrollHeight ? that.$refs.leftHeight.scrollHeight : that.scrollHeight;
				that.scrollHeight = scrollHeight;
			});
		},
		watch: {
			// 如果 `scrollHeight` 发生改变，这个函数就会运行 此处是为了防止用户缩小屏幕导致页面显示不全
			scrollHeight: function (val) {
				this.$refs.leftHeight.style.height = this.moveShow ? this.scrollHeight + 'px' : 0 + 'px';
			}
		}
	};
</script>
<style>
	#userRecharge {
		width: 100%;
		height: 100%;
		background: #ffffff;
	}
</style>
